<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title> 多层选项卡-兵兵</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		
		<style type="text/css">
			body,p,dd{margin: 0;}
			dl{margin: 0;padding: 0;list-style: none;}
			a{text-decoration: none;color: inherit;outline: none;}
			img{border: none;overflow: hidden;}
			
			.wrap{
				position: relative;
				width: 480px;
				height: 250px;
				margin: 50px auto;
			}
			.wrap dt{
				position: absolute;
				left: 0;
				width: 80px;
				height: 40px;
				background: #000;
				color: #fff;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
			}
			.wrap dt#l1{
				top: 45px;
			}
			.wrap dt#l2{
				top: 90px;
			}
			.wrap dt.on{
				background: #f60;
			}
			.wrap dd{
				position: absolute;
				right: 0;
				top: 0;
				display: none;
				width: 400px;
				height: 250px;
			}
			.wrap dd img{
				width: 100%;
				height: 100%;
			}
			.wrap dd.on{
				display: block;
			}
			.wrap p{
				position: absolute;
				right: 0;
				bottom: 0;
				display: none;
				width: 400px;
				text-align: right;
				background: rgba(0,0,0,.6);
			}
			.wrap p.on{
				display: block;
			}

			.wrap p a{
				display: inline-block;
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: #fff;
			}
			.wrap p a.on{
				background: #f60;
			}

		</style>

	</head>
	<body>
	    <div class="wrap">
	    	<div>
	    		<!-- 车 -->
	    		<dl id="c">
	    			<dt class="on">车</dt>
	    			<dd class="on"><img src="images/1.jpg" alt="车" width="326" height="204"></dd>
	    			<dd><img src="images/2.jpg" alt="车" width="326" height="204"></dd>
	    			<dd><img src="images/3.jpg" alt="车" width="326" height="204"></dd>
	    			<dd><img src="images/4.jpg" alt="车" width="326" height="204"></dd>
	    		</dl>
	    		<p class="on">
	    			<a class="on" href="javascript:;">1</a>
	    			<a href="javascript:;">2</a>
	    			<a href="javascript:;">3</a>
	    			<a href="javascript:;">4</a>
	    		</p>
	    	</div>
			<!-- 美食 -->
	    	<div>
	    		<dl>
	    			<dt id='l1'>美食</dt>
	    			<dd><img src="images/m1.jpg" alt="美食" width="326" height="204"></dd>
	    			<dd><img src="images/m2.jpg"alt="美食" width="326" height="204"></dd>
	    			<dd><img src="images/m3.jpg"alt="美食" width="326" height="204"></dd>
	    			<dd><img src="images/m4.jpg"alt="美食" width="326" height="204"></dd>
	    			<dd><img src="images/m5.jpg"alt="美食" width="326" height="204"></dd>
	    		</dl>
	    		<p>
	    			<a href="javascript:;">1</a>
	    			<a href="javascript:;">2</a>
	    			<a href="javascript:;">3</a>
	    			<a href="javascript:;">4</a>
	    			<a href="javascript:;">5</a>
	    		</p></div>
	    	<div>
	    		<!-- 风景 -->
	    	<div>
	    		<dl>
	    			<dt id='l2'>风景</dt>
	    			<dd><img src="images/s1.jpg" alt="风景" width="326" height="204"></dd>
	    			<dd><img src="images/s2.jpg"alt="风景" width="326" height="204"></dd>
	    			<dd><img src="images/s3.jpg"alt="风景" width="326" height="204"></dd>
	    			<dd><img src="images/s4.jpg"alt="风景" width="326" height="204"></dd>
	    			<dd><img src="images/s5.jpg"alt="风景" width="326" height="204"></dd>
	    		</dl>
	    		<p class="clearfix">
	    			<a href="javascript:;">1</a>
	    			<a href="javascript:;">2</a>
	    			<a href="javascript:;">3</a>
	    			<a href="javascript:;">4</a>
	    			<a href="javascript:;">5</a>
	    		</p></div>
	    	</div>
	    </div>

	    <script>
	    	var aDl = document.getElementsByTagName('dl'),
	    		aDt = document.getElementsByTagName('dt'),
	    		aDd = document.getElementsByTagName('dd'),
	    		aA = document.getElementsByTagName('a'),
	    		aP = document.getElementsByTagName('p'),
	    		index = 0,
	    		length = 0,
	    		num = 0,
	    		num1 = 0,
	    		arr = [];

	    	for(var i = 0;i < aDl.length;i++){
	    		arr[i] = length;
	    		length += aDl[i].getElementsByTagName('dd').length;
	    	}

	    	for (var i = 0; i < aDd.length; i++) {
	    		aA[i].index = i;
	    		aA[i].onclick = fn;
	    	}

	    	function fn(){
    			aA[num].className = '';
    			aDd[num].className = '';
    			num = this.index;
    			aA[num].className = 'on';
    			aDd[num].className = 'on';
    		}
	    	for (var j = 0; j < aDt.length; j++) {
	    		aDt[j].index = j;
	    		aDt[j].onclick = function (){
	    			if (this.index!=num1) {
	    				arr[num1]=num;
	    				aDt[num1].className = '';
	    				aDd[arr[num1]].className = '';
	    				aP[num1].className = '';
	    				aA[num].className = '';
	    				num1 = this.index;
	    				aDt[num1].className = 'on';
	    				aA[arr[num1]].className = 'on';
	    				aDd[arr[num1]].className = 'on';
	    				aP[num1].className = 'on';
	    				num = arr[num1];
	    			}
	    		}
	    	}
	    </script>

	</body>
</html>